<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="甘忠祥">
    <title>唯品会</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <nav class="nav">
        <div class="container nav-container clearfix">
            <ul class="nav-left">
                <li><a href="#">河南<i class="list-icon"></i></a>
                    <ul class="nav-sub">
                        <li id="cover"></li>
                        <h3>请选择所在收货地区</h3>
                        <hr>
                        <li><span> A </span><a href="#">安徽 </a><a href="#">澳门</a></li>
                        <li><span> B </span><a href="#">北京</a></li>
                        <li><span> C </span><a href="#">重庆</a></li>  
                        <li><span> F </span><a href="#">福建</a></li>
                        <li><span> G </span><a href="#">广东 </a><a href="#">广西 </a><a href="#">贵州 </a><a href="#">甘肃 </a></li>
                        <li><span> H </span><a href="#">河北 </a><a href="#" style="color:#f8007f;">河南 </a><a href="#">黑龙江 </a><a href="#">海南 </a></li>
                        <li><span> J </span><a href="#">江苏 </a><a href="#">吉林 </a><a href="#">江西 </a></li>
                        <li><span> L </span><a href="#">辽宁 </a></li>
                        <li><span> N </span><a href="#">内蒙古 </a><a href="#">宁夏 </a></li>
                        <li><span> Q </span><a href="#">青海 </a></li>
                        <li><span> S </span><a href="#">上海 </a><a href="#">山东 </a><a href="#">山西 </a><a href="#">四川 </a><a href="#">陕西 </a></li>
                        <li><span> T </span><a href="#">台湾 </a><a href="#">天津 </a></li>
                        <li><span> X </span><a href="#">西藏 </a><a href="#">香港 </a><a href="#">新疆 </a></li>
                        <li><span> Y </span><a href="#">云南 </a></li>
                        <li><span> Z </span><a href="#">浙江 </a></li>

                    </ul>
                </li>  
            </ul>
            <ul class="nav-right">
                <li class="login"><a href="#">请登录</a>
                    <ul class="nav-login">
                        
                        <li id="cover1"></li>
                        <div id="login">
                            <span class="login-icon"></span>
                            <span>您好！<a href="#">[请登录]</a></span>
                        </div>
                        
                        <li><a href="#">我的收藏</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">零钱</a></li>  
                        <li><a href="#">我的优惠券</a></li>
                        <li><a href="#">我的唯品币</a></li>  
                        <li><a href="#">唯品金融</a></li>
                    </ul>
                </li>
                <li><a href="#">注册</a>&nbsp;/</li>
                <li><a href="#"><img src="./img/header_sign.gif" alt="" style="margin-right:1px;">签到有礼</a>&nbsp;/
                    
                        <ul class="qiandao"> 
                             <hr> 
                            <li><span class="qiandao-icon"><p>1天</p></span></li>
                            <li><span class="qiandao-icon"><p>2天</p></span></li>
                            <li><span class="qiandao-icon"><p>3天</p></span></li>
                            <li><span class="qiandao-icon"><p>4天</p></span></li>
                            <li><span class="qiandao-icon"><p>5天</p></span></li>
                            <li><span class="qiandao-icon"><p>6天</p></span></li>
                            <li><span class="qiandao-icon"><p>7天</p></span><button>签到</button></li>
                        </ul>
                      
                        
                </li>
                <li><a href="#">我的订单</a>&nbsp;/</li>
                <li><a href="#">我的特卖<span class="list-icon"></span></a>&nbsp;/
                    <ul class="shoucang">
                        <li><a href="#">品牌收藏(0)</a></li>
                        <li><a href="#">商品收藏(0)</a></li>
                        <li><a href="#">我的足迹(0)</a></li>
                    </ul>
                </li>
                <li><a href="#">会员俱乐部<span class="list-icon"></span></a>&nbsp;/
                    <ul class="shoucang">
                        <li><a href="#">俱乐部首页</a></li>
                        <li><a href="#">唯品币兑换</a></li>
                        <li><a href="#">免费抽大奖</a></li>
                    </ul>
                </li>
                <li><a href="#">客户服务<span class="list-icon"></span></a>&nbsp;/
                    <ul class="shoucang">
                        <li><a href="#">联系客服</a></li>
                        <li><a href="#">帮助中心</a></li>
                        <li><a href="#">服务中心</a></li>
                        <li><a href="#">知识产权投诉</a></li>
                    </ul>
                </li>
                <li><a href="#"><span class="phone-icon"></span>手机版</a>&nbsp;/
                    <div class="phone">
                        <img src="./img/phone.jpg" alt="">
                        <p><a href="#">随时逛 及时抢</a></p>
                    </div>
                </li>
                <li><a href="#">更多<span class="list-icon"></span></a>
                    <ul class="more">
                        <h3>合作专区</h3>
                        <li><a href="#">联通卡申请</a></li>
                        <li><a href="#">唯品卡</a></li>
                        <li><a href="#">支付专区</a></li>
                        <ul class="more-second">
                            <h3>关于我们</h3>
                            <li><a href="#">sell on vip</a></li>
                            <li><a href="#">品牌招商</a></li>
                            <li><a href="#">官方博客</a></li>
                        </ul>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
    <header class="header container clearfix">
        <div class="logo">
            <img src="./img/logo.png" alt="">
        </div>
        <div class="logo-list">
            <ul>
                <li><a href="#"><img src="./img/nav01.png" alt=""></a></li>
                <li><a href="#"><img src="./img/nav02.png" alt=""></a></li>
                <li><a href="#"><img src="./img/nav03.png" alt=""></a></li>
                <li class="gouwuche"><a href="#" class="gwc"><span class="shop"></span><span>我的购物车</span></a>
                  <div class="che">
                      <p style="color:#000; line-height:80px;">好像还未登录！<a href="" style="color:#df147f;">马上登录 </a>查看购物袋</p>
                  </div>
                </li>
            </ul>
            
        </div>  
            
    </header>
    <div class="back">
        <div class="container">
            <ul class="nav-second">
                <li style="background-color:#b7146a;"><a href="#">首页</a></li>
                <li><a href="#">唯品国际</a></li>
                <li><a href="#">母婴</a></li>
                <li><a href="#">家居家电</a></li>
                <li><a href="#">男士</a></li>
                <li><a href="#">美妆</a></li>
                <li><a href="#">生活超市</a></li>
                <li><a href="#">金融</a></li>
                <li class="more-move"><a href="#">更多<span class="list-icon"></span></a>
                    <div class="content-box">
                        <ul class="content-list">
                            <li style="background-color: #fcfcfc;">
                                <a href="#">
                                    <img src="./img/1.jpg" alt="">
                                    <div class="corver"></div>
                                    <div class="corver-info">
                                        <h3>女装</h3>
                                    </div>
                                </a>
                            </li>
                            <li style="background-color: #fcfcfc;">
                                <a href="#">
                                    <img src="img/2.jpg" alt="">
                                    <div class="corver"></div>
                                    <div class="corver-info">
                                        <h3>鞋包</h3>
                                    </div>
                                </a>
                            </li>
                            <li style="background-color: #fcfcfc;">
                                <a href="#">
                                    <img src="img/3.jpg" alt="">
                                    <div class="corver"></div>
                                    <div class="corver-info">
                                        <h3>配饰</h3>
                                    </div>
                                </a>
                            </li>
                            <li style="background-color: #fcfcfc;">
                                <a href="#">
                                    <img src="img/4.jpg" alt="">
                                    <div class="corver"></div>
                                    <div class="corver-info">
                                        <h3>运动</h3>
                                    </div>
                                </a>
                            </li>
                            <li style="background-color: #fcfcfc;">
                                <a href="#">
                                    <img src="img/5.jpg" alt="">
                                    <div class="corver"></div>
                                    <div class="corver-info">
                                        <h3>唯品·奢</h3>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            
            </ul>
           <ul class="nav-second-right">
                <li><img src="./img/1470377526197.png" alt=""><a href="#">分类</a></li>
                <li><img src="./img/1470377501079.png" alt=""><a href="#">预告</a></li>
            </ul>

        </div>
    </div>
    <div class="lunbo-back clearfix">
        <div class="lunbo-container">
            <div class="banner">
                <div class="banner-info">
                    <ul class="img-list">
                        <li class="current"><a href="#"><img src="img/lunbo01.jpg" alt=""></a></li>
                        <li><a href="#"><img src="img/lunbo02.jpg" alt=""></a></li>
                        <li><a href="#"><img src="img/lunbo03.jpg" alt=""></a></li>
                        <li><a href="#"><img src="img/lunbo04.jpg" alt=""></a></li>
                    </ul>
                </div>
                <div class="indicator-info"> 
                    <ul class="indicator">
                        <li class="active"><a href="#">欧莱雅vip大牌日</a></li>
                        <li><a href="#">时尚风景 最高满199减40</a></li>
                        <li><a href="#">居家夏末 福利大派发</a></li>
                        <li><a href="#">全球早秋扫货指南</a></li>
                        <hr class="active-move"> 
                    </ul>
                    
                </div>
            </div>
        </div>
    </div>
    <div class="container hot">
        <div class="hot-img">
            <img src="img/bg_v3.jpg" alt="">
            <ul class="hot-list">
                <li><a href="#"><img src="img/1502078817176.jpg" alt=""></a><span class="hot1"></span></li>
                <li><a href="#"><img src="img/1502078828997.jpg" alt=""></a><span class="hot2"></span></li>
                <li><a href="#"><img src="img/1502078840972.jpg" alt=""></a><span class="hot3"></span></li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="new">
            <img src="img/title_v2.jpg" alt="">
        </div>
    </div>
    <div class="container">
        <ul class="new-shop clearfix">
            <li><a href="#"><img src="img/beauty_v2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/sport_v2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/man_v2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/bag_v2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/kid_v2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/global_v2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/food_v2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/more.jpg" alt=""></a></li>
        </ul>
        <ul class="new-shop-info clearfix">
            <li><a href="#">美妆馆</a></li>
            <li><a href="#">体用馆</a></li>
            <li><a href="#">男装馆</a></li>
            <li><a href="#">鞋包馆</a></li>
            <li><a href="#">母婴馆</a></li>
            <li><a href="#">全球馆</a></li>
            <li><a href="#">人气零食</a></li>
            <li><a href="#">更多分类</a></li>
        </ul>
    </div>
    <div class="container clearfix">
        <ul class="clothes">
            <li><a href="#"><img src="img/clothes_bg_v2.jpg" alt=""></a>
                <ul class="clothes-info">
                    <li><a href="#"><img src="img/clothes_01_v2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/clothes_02_v2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/clothes_03_v2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/clothes_04_v2.jpg" alt=""></a></li>
                </ul>
                <ul class="clothes-info-list clearfix">
                    <li><a href="#">连衣裙</a></li>
                    <li><a href="#">省心套装</a></li>
                    <li><a href="#">半身裙</a></li>
                    <li><a href="#">百搭T恤</a></li>
                </ul>
            </li>
            <li><a href="#"><img src="img/beauty_bg_v2.jpg" alt=""></a>
                <ul class="clothes-info">
                    <li><a href="#"><img src="img/beauty_01_v2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/beauty_02_v2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/beauty_03_v2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/beauty_04_v2.jpg" alt=""></a></li>
                </ul>
                <ul class="clothes-info-list2 clearfix">
                    <li><a href="#">人气彩妆</a></li>
                    <li><a href="#">护理套装</a></li>
                    <li><a href="#">口碑面膜</a></li>
                    <li><a href="#">清爽水乳</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="container">
        <div class="new">
            <img src="img/today_DDp.png" alt="">
        </div>
    </div>
    <div class="container clearfix">
        <ul class="jingxuan-list">
            <li><a href="#"><img src="img/PC2_ykor.jpg" alt=""></a>
                <ul class="jingxuan-clothes">
                    <li><a href="#"><img src="img/3b559ed4-f79a-4b4e-9c64-d88cdff8a5ba_t.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/H10019040400-5.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/JORYA-13JH201BG01-5.jpg" alt=""></a></li>
                    <ul class="jingxuan-clothes-bottom">
                        <li><button>进入专场</button></li>
                    </ul>
                </ul>
               
            </li>
            <li><a href="#"><img src="img/PC2_pjbx.jpg" alt=""></a>
             <ul class="jingxuan-clothes">
                    <li><a href="#"><img src="img/3b559ed4-f79a-4b4e-9c64-d88cdff8a5ba_t.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/H10019040400-5.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/JORYA-13JH201BG01-5.jpg" alt=""></a></li>
                    <ul class="jingxuan-clothes-bottom">
                        <li><button>进入专场</button></li>
                    </ul>
                </ul></li>
            <li><a href="#"><img src="img/570X3503.jpg" alt=""></a>
             <ul class="jingxuan-clothes">
                    <li><a href="#"><img src="img/3b559ed4-f79a-4b4e-9c64-d88cdff8a5ba_t.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/H10019040400-5.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/JORYA-13JH201BG01-5.jpg" alt=""></a></li>
                    <ul class="jingxuan-clothes-bottom">
                        <li><button>进入专场</button></li>
                    </ul>
                </ul></li>
            <li><a href="#"><img src="img/570x350_wstm.jpg" alt="">
             <ul class="jingxuan-clothes">
                    <li><a href="#"><img src="img/3b559ed4-f79a-4b4e-9c64-d88cdff8a5ba_t.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/H10019040400-5.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/JORYA-13JH201BG01-5.jpg" alt=""></a></li>
                    <ul class="jingxuan-clothes-bottom">
                        <li><button>进入专场</button></li>
                    </ul>
                </ul></a></li>
        </ul>
    </div>
    <!--右边导航条  -->
    <!-- <div class="right-nav">
        <ul class="right-nav-list">
            <li class="right-nav-list-zhaohao"><a href="#"><span class="zhanghao"></span></a>
                <div class="zhaohao-list">
                    <div class="zhaohao-list-img">
                        <span></span>
                        <p style="color:#000;">您好！请 <a href="" style="color:#df147f;">登录 </a>|<a href=""style="color:#df147f;"> 注册</a></p>
                    </div>
                    <ul class="zhaohao-tu">
                            <li style="background-color:#aaa;"><span class="my-dingdan"></span>
                            <a href=""><p>我的订单</p></li></a>
                            <li style="background-color:#aaa;"><span class="my-info"></span>
                            <a href=""><p>我的消息</p></li></a>
                        </section>
                            
                    </ul>
                   <div class="zhaohao-vip">
                       <a href="" style="color:aqua;"><p>会员俱乐部</p></a>
                   </div>
                </div>
            </li>
            <li style="background-color:#df147f; height:180px;"><a href="#"><span class="gouwudai"></span>
            <p style="font-size:18px;padding-left:10px;">购物袋</p><p style="font-size:18px;padding-left:5px;background-color:white;border-radius:50%; color:#df147f;height:20px;width:20px;margin:10px;">0</p>
            </a></li>
            <li><a href="#"><span class="quan"></span></a>
                <div class="right-list">
                    <a href="" style="color:black;font-size:18px;line-height:60px; text-align: center;"><p>我的优惠券</p></a>
                </div>
            </li>
            <li><a href="#"><span class="xin"></span></a>
                <div class="right-list1">
                    <a href="" style="color:black;font-size:18px;line-height:40px; text-align: center;"><p>品牌收藏</p></a>
                </div>
            </li>
            <li><a href="#"><span class="wuxin"></span></a>
            <div class="right-list2">
                    <a href="" style="color:black;font-size:18px;line-height:40px; text-align: center;"><p>商品收藏</p></a>
                </div>
            </li>
            <li><a href="#"><span class="zuji"></span></a>
                <div class="right-list3">
                    <a href="" style="color:black;font-size:18px;line-height:40px; text-align: center;"><p>我的足迹</p></a>
                </div>
            </li>
        </ul>
        <ul class="right-nav-list-bottom">
            <li><a href="#"><span class="fankui"></span></a></li>
            <li><a href="#"><span class="backtotop"></span></a></li>
        </ul>
    </div> -->
    <div class="right-nav">
        <ul class="right-nav-list">
            <li><a href="#"><span class="zhanghao"></span></a>
                <div class="zhaohao-list">
                    <div class="zhaohao-list-img">
                        <span></span>
                        <p style="color:#000;">您好！请 <a href="" style="color:#df147f;">登录 </a>|<a href=""style="color:#df147f;"> 注册</a></p>
                    </div>
                    <ul class="zhaohao-tu">
                            <li style="background-color:#aaa;"><span class="my-dingdan"></span>
                            <a href=""><p>我的订单</p></li></a>
                            <li style="background-color:#aaa;"><span class="my-info"></span>
                            <a href=""><p>我的消息</p></li></a>
                    
                            
                    </ul>
                   <div class="zhaohao-vip">
                       <a href="" style="color:aquamarine"><p>会员俱乐部</p></a>
                   </div>
                </div>
            </li>
            <li><a href="#"><span class="gouwudai"></span></a></li>
            <li><a href="#"><span class="quan"></span></a>
                <div class="right-list">
                    <a href="" style="color:black;font-size:18px;line-height:35px; text-align: center;"><p>我的优惠券</p></a>
                </div>
            </li>
            <li><a href="#"><span class="xin"></span></a>
                 <div class="right-list1">
                    <a href="" style="color:black;font-size:18px;line-height:35px; text-align: center;"><p>品牌收藏</p></a>
                </div>
            </li>
            <li><a href="#"><span class="wuxin"></span></a>
                 <div class="right-list2">
                    <a href="" style="color:black;font-size:18px;line-height:35px; text-align: center;"><p>商品收藏</p></a>
                </div>
            </li>
            <li><a href="#"><span class="zuji"></span></a>
                <div class="right-list3">
                    <a href="" style="color:black;font-size:18px;line-height:35px; text-align: center;"><p>我的足迹</p></a>
                </div>
            </li>
        </ul>
        <ul class="right-nav-list-bottom">
            <li><a href="#"><span class="fankui"></span></a>
    
            </li>
            <li><a href="#"><span class="backtotop"></span></a>

            </li>
        </ul>
    </div>
    <main style="height:1000px;"></main>
</body> 
<script src="js/index.js"></script>
</html> 